<template>
  <div>
    <el-dialog  class="global-dialog" v-model="dialog" :lock-scroll="false" :append-to-body="false" width="950px"
      :show-close="false" @close="close" :close-on-click-modal="false">

      <div class="my-header">
        <el-tabs v-model="data.activeName" class="demo-tabs">
          <el-tab-pane label="项目维度" name="first">
            <el-row class="mb10">
              <el-col :span="24" align="left">
                <div class="flex">
                  <el-input clearable v-model="data.preject.projectname" placeholder="项目名称"
                    style="width: 100px; margin-right: 15px">
                  </el-input>

                  <el-select v-model="data.preject.sfty" placeholder="请选择分类" clearable>
                    <el-option v-for="item in data.scoreType" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>

                  <el-select v-model="data.preject.pdzd" placeholder="请选择范围" clearable>
                    <el-option v-for="item in data.limitType" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>

                  <el-input clearable v-model="data.preject.expertscore" placeholder="数值"
                    style="width: 100px; margin-right: 15px">
                  </el-input>

                  <el-button color="#626aef" @click="getProjectTableData">搜索</el-button>
                </div>
              </el-col>
            </el-row>
            <el-divider content-position="left"></el-divider>

            <el-table :data="data.projectTableData">

              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column prop="projectname" label="项目名称" width="180"> </el-table-column>
              <el-table-column prop="ljps" label="专家总票数"> </el-table-column>
              <el-table-column prop="account" label="同意票数"> </el-table-column>
              <el-table-column prop="unaccount" label="不同意票数"> </el-table-column>
              <el-table-column prop="bendacount" label="未投票"> </el-table-column>
              <el-table-column prop="pjz" label="平均分"> </el-table-column>
            </el-table>
            <div class="tc mt15">
              <el-pagination background v-model:current-page="data.preject.page" @current-change="pageProjectChange"
                :total="data.projectTotal" :page-size="data.preject.pageSize" />
            </div>
          </el-tab-pane>

          <el-tab-pane label="专家维度" name="secord">
            <el-row class="mb10">
              <el-col :span="24" align="left">
                <div class="flex">
                  <el-input clearable v-model="data.expert.expertname" placeholder="专家姓名"
                    style="width: 100px; margin-right: 15px">
                  </el-input>
                  <el-select v-model="data.expert.sfty" placeholder="请选择分类" clearable>
                    <el-option v-for="item in data.scoreTypetwo" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <el-select v-model="data.expert.pdzd" placeholder="请选择范围" clearable>
                    <el-option v-for="item in data.limitType" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>

                  <el-input clearable v-model="data.expert.expertscore" placeholder="票数"
                    style="width: 100px; margin-right: 15px">
                  </el-input>
                  <el-button color="#626aef" @click="getExpertTableData">搜索</el-button>
                </div>
              </el-col>
            </el-row>
            <el-divider content-position="left"></el-divider>

            <el-table :data="data.expertTableData">
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column prop="expertname" label="专家" width="180"> </el-table-column>
              <el-table-column prop="account" label="同意票数"> </el-table-column>
              <el-table-column prop="unaccount" label="不同意票数"> </el-table-column>
              <el-table-column prop="bendacount" label="弃票数"> </el-table-column>
            </el-table>
            <div class="tc mt15">
              <el-pagination background v-model:current-page="data.expert.page" @current-change="pageExpertChange"
                :total="data.expertTotal" :page-size="data.expert.pageSize" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>


      <template #footer>
        <span class="dialog-footer">
          <el-button size="small"  @click="close"
            >关闭</el-button
          >

        </span>
      </template>

    </el-dialog>
  </div>
</template>

<script lang="ts">

import Table from '@/views/science/components/table/table.vue';

import { reactive, ref, watch } from 'vue'

import { getExpertInfo, getSetUpExpertScore } from "../../../api/formExamination";
import {tips} from "@/views/science/components/tips/tips";

export default {
  components: {
    Table
  },
  props: {

    checkId: {
      type: String,
      required: true,
    },
    // lookId1: {
    //   type: String,
    //   required: true,
    // },
    dialog: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
/*    watch(
        () => props.lookId1,
        (props) => {
          getProjectTableData();
          getExpertTableData()
        })*/
    let data = reactive({
      projectTotal: 0,
      expertTotal: 0,
      preject: {
        projectname: '',
        expertid: "",
        expertscore: "",
        pdzd: "",
        sfty: "",
        page: 1,
        pageSize: 10,
      },

      expert: {
        expertname: "",
        pdzd: "",
        sfty: "",
        expertscore: "",
        page: 1,
        pageSize: 10,
      },

      projectTableData: [],
      expertTableData: [],
      activeName: ref("first"),
      scoreType: [
        {
          value: "account",
          label: "同意票数",
        },
        {
          value: "unaccount",
          label: "不同意票数",
        },
        {
          value: "bendacount",
          label: "未投票",
        },
        {
          value: "ljps",
          label: "专家总票数",
        },
        {
          value: "pjz",
          label: "平均分",
        },
      ],
      scoreTypetwo: [
        {
          value: "account",
          label: "同意票数",
        },
        {
          value: "unaccount",
          label: "不同意票数",
        },
        {
          value: "bendacount",
          label: "弃票",
        }
      ],
      limitType: [
        {
          value: "2",
          label: "大于",
        },
        {
          value: "1",
          label: "等于",
        },
        {
          value: "3",
          label: "小于",
        },
        {
          value: "4",
          label: "大于等于",
        },
        {
          value: "5",
          label: "小于等于",
        },
      ]
    });

    watch(() => props.dialog, (newValue) => {
      if (newValue) {
        getProjectTableData();
        getExpertTableData()
      }
    })

    const pageExpertChange = (current) => {

      data.expert.page = current;

      getExpertTableData();

    }

    const pageProjectChange = (current) => {

      data.preject.page = current;

      getProjectTableData();

    }
    // 专家维度

    const getExpertTableData = async () => {
      if(data.expert.sfty !=''&& data.expert.pdzd !=''&& data.expert.expertscore !='') {
        console.log(1111,data.expert.sfty,data.expert.pdzd,data.expert.expertscore);
        let res = await getExpertInfo(data.expert);
        if (res.data.success) {
          data.expertTableData = res.data.data.records;
          data.expertTotal = res.data.data.total;
        }
      }else if (data.expert.sfty ==''&& data.expert.pdzd ==''&& data.expert.expertscore ==''){
        console.log(2222,data.expert.sfty,data.expert.pdzd,data.expert.expertscore);
        let res = await getExpertInfo(data.expert);
        if (res.data.success) {
          data.expertTableData = res.data.data.records;
          data.expertTotal = res.data.data.total;
        }
      }else {
        console.log(3333,data.expert);
        tips("票数分类和票数范围以及票数要么全部填写,要么全部不填写", "warning");
        return;
      }


    };
    // 获取项目维度
    const getProjectTableData = async () => {
      if(data.preject.sfty !='' && data.preject.pdzd !='' && data.preject.expertscore !='') {
        console.log(1111,data.preject.sfty,data.preject.pdzd,data.preject.expertscore,);
        // alert(1111);
        let res = await getSetUpExpertScore(data.preject);
        if (res.data.success) {
          data.projectTableData = res.data.data.records;
          data.projectTotal = res.data.data.total;
        }
      }else if (data.preject.sfty =='' && data.preject.pdzd =='' && data.preject.expertscore ==''){
        // alert(2222222222);
        console.log(222222,data.preject.sfty,data.preject.pdzd,data.preject.expertscore,);

        let res = await getSetUpExpertScore(data.preject);
        if (res.data.success) {
          data.projectTableData = res.data.data.records;
          data.projectTotal = res.data.data.total;
        }
      }else {
        console.log(3333,data.expert);
        tips("票数分类和票数范围以及票数要么全部填写，要么全部不填写", "warning");
        return;
      }

    };


    const close = () => {

      emit("changeDialog");

    };
    return {

      pageProjectChange,

      getProjectTableData,

      getExpertTableData,

      pageExpertChange,

      data,

      close,
    };
  },
};
</script>

<style scoped lang="scss">
.mt15 {
  margin-top: 15px;
}

.tc {
  text-align: center;
}
</style>
